@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tabs';

$directions: 'left', 'right';
$types: 'primary', 'secondary';

.scrollButton {
  position: absolute;
  top: 0;
  bottom: 0;

  display: flex;
  align-items: center;

  @each $direction in $directions {
    &[data-direction=#{$direction}] {
      #{$direction}: 0;

      @each $type in $types {
        &[data-type=#{$type}] {
          padding-#{$direction}: simple-var($theme-variables, 'space', 'tabs', $type, 'scroll-button-layout');
        }
      }
    }
  }
}
